<template>
    <div class="body fill-parent" dg-chart-auto-resize="true"
        dg-chart-options="{title:{show:false},legend:{top:0},grid:{top:25}}"
        dg-chart-theme="{color:'#F0F0F0',actualBackgroundColor:'#0c1c2e'}">
        <div class="head">
            <div class="title"><label>就诊数据分析</label></div>
        </div>
        <div class="content">
            <div class="layout layout-left-top">
                <div class="panel">
                    <div class="title"><label>校医室看诊频率</label></div>
                    <div class="chart" id="diagnosticFreqLine" dg-chart-widget=""></div>
                </div>
            </div>
            <div class="layout layout-left-bottom">
                <div class="panel panel-bg">
                    <div class="title"><label>学生就诊时段分布</label></div>
                    <div class="chart" id="periodsPart" dg-chart-widget=""></div>
                </div>
            </div>
            <div class="layout layout-center-top">
                <div class="panel">
                    <div class="title"><label>就诊诊断结果词云图</label></div>
                    <div class="chart" id="wordCloud" dg-chart-widget=""></div>
                </div>
            </div>
            <div class="layout layout-center-bottom">
                <div class="panel panel-bg">
                    <div class="title"><label>医疗资源利用情况</label></div>
                    <div class="chart" id="mediUtilize" dg-chart-widget=""></div>
                </div>
            </div>
            <div class="layout layout-right-top">
                <div class="panel">
                    <div class="title"><label>高发疾病确诊频率</label></div>
                    <div class="chart" id="diseaseFreqBar" dg-chart-widget=""></div>
                </div>
            </div>
            <div class="layout layout-right-bottom">
                <div class="panel panel-bg">
                    <div class="title"><label>医疗服务满意度</label></div>
                    <div class="chart" id="satisfyDegree" dg-chart-widget=""></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-wordcloud';
export default {
    data() {
        return {
            //看诊频率
            diagnosticFreqLine: null,
            diagnosticFreqX: [],
            diagnosticFreqY: [],
            //确诊统计
            diseaseFreqBar: null,
            diseaseFreqData: [],
            diseaseFreqX: [],
            //词云
            wordCloud: null,
            wordData: [
                { name: '互联网服务', value: 1000 },
                { name: '交通运输', value: 850 },
                { name: '公司', value: 800 },
                { name: '军工', value: 600 },
                { name: '医药', value: 900 },
                { name: '商务服务', value: 600 },
                { name: '城乡规划', value: 800 },
                { name: '家政服务', value: 400 },
                { name: '安防', value: 850 },
                { name: '医疗服务', value: 200 },
                { name: '电子科技', value: 8000 },
                { name: '航空航天', value: 1500 },
                { name: '食品饮料', value: 1500 },
                { name: '能源', value: 800 },
                { name: '教育培训', value: 200 },
                { name: '金融', value: 100 },
                { name: '文化娱乐', value: 250 },
                { name: '电力', value: 1200 },
                { name: '石油化工', value: 300 },
                { name: '电子商务', value: 900 },
                { name: '建筑', value: 700 },
                { name: '旅游', value: 550 },
                { name: '环保', value: 750 },
                { name: '地产', value: 1100 },
                { name: '体育', value: 300 },
                { name: '通信', value: 950 },
                { name: '科研', value: 1200 },
                { name: '物流', value: 1300 },
                { name: '咨询', value: 600 },
                { name: '游戏', value: 850 },
                { name: '人力资源', value: 500 },
                { name: '水务', value: 300 },
                { name: '舞蹈艺术', value: 150 },
                { name: '汽车制造', value: 1100 },
                { name: '电影制作', value: 350 },
                { name: '游乐园', value: 250 },
                { name: '新能源', value: 900 },
                { name: '服装设计', value: 400 },
                { name: '采矿', value: 700 },
                { name: '信息安全', value: 800 },
                { name: '化妆品', value: 600 },
                { name: '音乐产业', value: 750 },
                { name: '物联网', value: 1200 },
                { name: '绿色建筑', value: 850 },
                { name: '社交媒体', value: 950 },
                { name: '人工智能', value: 1000 },
                { name: '水产养殖', value: 320 },
                { name: '医学研究', value: 1800 },
                { name: '动物保护', value: 130 },
                { name: '航海', value: 1000 }
            ],
            //就诊时间分布
            periodsPart: null,
            periodsData: [],
            //医疗资源利用率
            mediUtilize: null,
            mediUtilizeData: [],
            //满意度
            satisfyDegree: null,
            satisfyDegreeData: [],
            satisfyDegreeX: []
            
        }
    },
    methods: {
        /**
         * 得到看诊频率
         */
        getDiagnosticCount() {
            const that = this;
            this.request.get('/diagnosis/countDiagnosisFreq', {}).then((res) => {
                if (res.code == 200) {
                    let count = res.data;
                    let x = [];
                    let y = [];
                    for (let i = 0; i < count.length; i++) {
                        const time = count[i].time.split("-");
                        x[i] = parseInt(time[1]) + "/" + parseInt(time[2]);
                        y[i] = count[i].data;
                    }
                    that.diagnosticFreqX = x;
                    that.diagnosticFreqY = y;
                    // 初始化图表
                    that.initDiagnosticFreqLine();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
         * 得到确诊频率
         */
        getDiseaseCount() {
            const that = this;
            this.request.get('/diagnosis/countDiseaseFreq', {}).then((res) => {
                if (res.code == 200) {
                    let count = res.data;
                    let data = [];
                    let x = [];
                    for (let i = 0; i < count.length; i++) {
                        data[i] = count[i].data;
                        x[i] = count[i].title;
                    }
                    that.diseaseFreqData = data;
                    that.diseaseFreqX = x;
                    // 初始化图表
                    that.initDiseaseFreqBar();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
         * 得到就医时间段分布
         */
        getPeriodCount() {
            const that = this;
            this.request.get('/diagnosis/countPeriod', {}).then((res) => {
                if (res.code == 200) {
                    let count = res.data;
                    let data = [];
                    for (let i = 0; i < count.length; i++) {
                        data[i] = {
                            name : count[i].title,
                            value : count[i].data
                        }
                    }
                    that.periodsData = data;
                    // 初始化图表
                    that.initPeriodsPart();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
        * 得到不同科室就诊数分布
        */
        getEntVisits() {
            const that = this;
            this.request.get('/diagnosis/countEntVisits', {}).then((res) => {
                if (res.code == 200) {
                    let count = res.data;
                    let data = [];
                    for (let i = 0; i < count.length; i++) {
                        data[i] = {
                            name : count[i].title,
                            value : count[i].data
                        }
                    }
                    that.mediUtilizeData = data;
                    // 初始化图表
                    that.initmediUtilize();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
        * 得到不同科室就诊数分布
        */
        getSatisfyDegree() {
            const that = this;
            this.request.get('/diagnosis/countSatisfyDegree', {}).then((res) => {
                if (res.code == 200) {
                    let count = res.data;
                    let data = [];
                    let x = [];
                    for (let i = 0; i < count.length; i++) {
                        data[i] = count[i].data;
                        x[i] = count[i].title + '分';
                    }
                    that.satisfyDegreeData = data;
                    that.satisfyDegreeX = x;
                    // 初始化图表
                    that.initSatisfyDegree();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
         * 得到统计词云
         */
        getWordCloud(){
            const that = this;
            this.request.get('/diagnosis/countWordCloud', {}).then((res) => {
                if (res.code == 200) {
                    that.wordData = res.data;
                    // 初始化图表
                    that.initWordCloud();
                } else {
                    this.$message({
                        message: res.msg,
                        type: "error",
                    });
                }
            })
        },
        /**
         * 初始化看诊频率图表
         */
        initDiagnosticFreqLine() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.diagnosticFreqLine = echarts.init(document.getElementById('diagnosticFreqLine'));
            // 指定图表的配置项和数据
            let option = {
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 20,
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: that.diagnosticFreqX,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white',
                        }
                    }
                },
                yAxis: {
                    x: 'center',
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'white',
                        }
                    }
                },
                series: [{
                    name: '看诊次数',
                    type: 'line',
                    smooth: true,
                    data: that.diagnosticFreqY
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.diagnosticFreqLine.setOption(option);
        },
        /**
         * 初始化看诊频率图表
         */
        initDiseaseFreqBar() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.diseaseFreqBar = echarts.init(document.getElementById('diseaseFreqBar'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    confine: true
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 20,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: 'white'
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        data: that.diseaseFreqX,
                        axisLine: {
                            lineStyle: {
                                color: 'white'
                            }
                        },
                    }
                ],
                series: [
                    {
                        name: '确诊次数',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'inside'
                            }
                        },
                        data: that.diseaseFreqData,
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.diseaseFreqBar.setOption(option);
        },
        /**
         * 初始化词云
         */
        initWordCloud() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.wordCloud = echarts.init(document.getElementById('wordCloud'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    show: true
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    top: '2%',
                    containLabel: true
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 8, // 控制词云图的网格大小，值越大词语之间的间距越大
                    sizeRange: [10, 80], // 控制词语的大小范围
                    rotationRange: [0, 0], // 控制词语的旋转角度范围
                    rotationStep: 45, // 控制词语旋转的步长
                    shape: 'circle', // 控制词云图的形状，可选值为 'circle', 'cardioid', 'diamond', 'triangle-forward', 'triangle', 'pentagon', 'star'
                    drawOutOfBound: false, // 控制词云图是否允许词语超出绘制区域
                    // 布局的时候是否有动画
                    layoutAnimation: true,
                    // 图的位置
                    left: 'center',
                    top: 'center',
                    textStyle: {
                        fontFamily: 'sans-serif',
                        // fontWeight: 'bold',
                        color: function () {
                            return 'rgb(' + [
                                Math.round(100 + Math.random() * 155), // 红色通道范围为100-255
                                Math.round(100 + Math.random() * 155), // 绿色通道范围为100-255
                                Math.round(100 + Math.random() * 155)  // 蓝色通道范围为100-255
                            ].join(',') + ')';
                        }
                    },
                    data: that.wordData,
                    emphasis: {
                        focus: 'self',
                        textStyle: {
                            fontSize: 50 // 点击的词放大
                        }
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.wordCloud.setOption(option);
            // 添加词的点击事件处理函数
            this.wordCloud.on('click', function () {

            });
            // 监听词云图中词语的鼠标移入事件
            this.wordCloud.on('mouseover', function () {

            });
        },
        /**
         * 初始化就医时间段分布
         */
        initPeriodsPart() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.periodsPart = echarts.init(document.getElementById('periodsPart'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '学生就诊时段分布',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: that.periodsData,
                        label: {
                            normal: {
                                // 各分区的提示内容
                                // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                                formatter: function (params) {
                                    return params.name + "\n\n" + params.percent + "%";
                                },
                                textStyle: {            // 提示文字的样式
                                    color: 'white',
                                }
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.periodsPart.setOption(option);
        },
        /**
         * 初始化就医时间段分布
         */
        initmediUtilize() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.mediUtilize = echarts.init(document.getElementById('mediUtilize'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '医疗资源利用率',
                        type: 'pie',
                        center: ['50%', '50%'],
                        data: that.mediUtilizeData,
                        label: {
                            normal: {
                                // 各分区的提示内容
                                // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                                formatter: function (params) {
                                    return params.name + "\n\n" + params.percent + "%";
                                },
                                textStyle: {            // 提示文字的样式
                                    color: 'white',
                                }
                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.mediUtilize.setOption(option);
        },
        /**
         * 初始化满意度
         */
        initSatisfyDegree() {
            const that = this;
            // 基于准备好的dom，初始化echarts实例
            this.satisfyDegree = echarts.init(document.getElementById('satisfyDegree'));
            // 指定图表的配置项和数据
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    confine: true
                },
                grid: {
                    left: 20,
                    right: 20,
                    bottom: 20,
                    top: 20,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: that.satisfyDegreeX
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '打分次数',
                        data: that.satisfyDegreeData,
                        type: 'bar'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.satisfyDegree.setOption(option);
        }

    },
    created() {
        this.getDiagnosticCount();
        this.getDiseaseCount();
        this.getPeriodCount();
        this.getEntVisits();
        this.getSatisfyDegree();
        this.getWordCloud();
    }
}
</script>

<style scoped>
@import '../../dist/css/largeScreen.css';
</style>